<template>
  <div class="box7">
    <div class="title">
      <p>运行状态</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="zongcishu">
      <div>运行次数</div>
      <!-- {{ runCount }}  -->
      <div style="font-size: 14px; margin-bottom: 6px">108</div>
      <div>故障次数</div>
      <div style="font-size: 14px">{{ faultCount }}</div>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { RobotApi } from "@/api/map/statecount";

// 获取 DOM 节点
let charts = ref();

// 运行次数和故障次数
let runCount = ref(0);
let faultCount = ref(0);
// 组件挂载完毕
onMounted(async () => {
  // 初始化图表
  let mychart = echarts.init(charts.value);

  // 定义刷新函数
  const refreshData = async () => {
    try {
      const res = await RobotApi.getRobotStateCount(null);
      console.log(res, "noparams");

      // 解析运行次数和故障次数
      runCount.value = res.all[0]["运行"];
      faultCount.value = res.all[1]["故障"];

      // 解析时间和数据
      const xAxisData = res.time.map((item) => {
        for (let key in item) {
          if (key !== "异常") {
            return key;
          }
        }
        return "";
      });

      const runData = res.time.map((item) => {
        for (let key in item) {
          if (key !== "异常") {
            return item[key];
          }
        }
        return 0;
      });

      const faultData = res.time.map((item) => item["异常"]);

      // 更新图表配置
      let option = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#FFCC00", "#67FFFF"],
        legend: {
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 16,
          top: "0%",
          bottom: "0%",
          right: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            padding: [0, 0, 0, 0],
          },
        },
        grid: {
          top: "25%",
          left: "36%",
          right: "6%",
          bottom: "20%",
        },
        xAxis: [
          {
            offset: 5,
            type: "category",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#425b78",
              },
            },
            axisLabel: {
              margin: 12,
              interval: 0,
              color: "#fff",
            },
            axisTick: { show: false },
            boundaryGap: false,
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            offset: 8,
            type: "value",
            interval: 1,
            name: "单位：次",
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
            },
            axisLine: {
              lineStyle: {
                color: "#425b78",
                fontSize: 14,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#587485",
                type: "dashed",
                width: 1,
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "故障",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#DFB80B",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(223,172,105,0.7)",
                    },
                    {
                      offset: 1,
                      color: "rgba(212,190,161,0.4)",
                    },
                  ],
                  false
                ),
              },
            },
            data: faultData,
          },
          {
            name: "运行",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#69f0ff",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(107,205,216,0.7)",
                    },
                    {
                      offset: 1,
                      color: "rgba(143,192,127,0.4)",
                    },
                  ],
                  false
                ),
              },
            },
            data: runData,
          },
        ],
      };

      // 更新图表
      mychart.setOption(option);
    } catch (error) {
      console.error("数据刷新失败:", error);
    }
  };

  // 首次加载数据
  await refreshData();

  // 每 30 分钟刷新一次数据
  const intervalId = setInterval(refreshData, 30 * 60 * 1000);

  // 组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(intervalId);
  });
});
</script>

<style scoped lang="scss">
.box7 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;

  .title {
    p {
      color: white;
      font-size: 18px;
    }
  }
  .zongcishu {
    color: #fff;
    div {
      padding: 4px;
    }
    text-align: center;
    font-size: 12px;
    position: absolute;
    top: 50%;
    right: 22%;
  }
  .charts {
    height: 260px;
  }
}
</style>
